<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>for</title>
    <!-- javascript内联-->
    <script type="text/javascript" th:inline="javascript">
        let users = [[${list}]];
        for (let index = 0; index < users.length; index++) {
            console.log(users[index].username)
        }
    </script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        function callback(data) {
            var result = JSON.stringify(data);
            alert("回调函数" + result)
        }

        function sub() {
            $.ajax({
                url: "http://localhost:/v1/test",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    var result = JSON.stringify(data);
                    alert("success" + result)
                },
                error: function (data) {
                    var result = JSON.stringify(data);
                    alert("error" + result)
                }
            });
        }
    </script>
</head>


<body>
<button onclick="sub() " type="button">测试跨域</button>
<h1>循环list</h1>
<table>
    <thead>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年纪</td>
        <td>生日</td>
        <td>邮箱</td>
        <td>角色名</td>
    </tr>
    <!--/* 循环用户 */-->
    <!--循环用户-->
    <tr data-th-each="users:${list}">
        <td th:text="${usersStat.index}">序号</td>
        <td th:text="${users.username}">姓名</td>
        <td th:text="${users.age}">年纪</td>
        <td th:text="${users.birthday}"> 生日</td>
        <td th:text="${users.email}">邮箱</td>
        <td th:text="${users.role.roleName}">角色名</td>
    </tr>
    </thead>
</table>


<ul>
    <li th:text="description" th:each="item : ${list}">Item description here...</li>
</ul>
<th:block th:if="1 == 1">
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
</th:block>
</body>
</html>